<!DOCTYPE html>
<html lang="en">

<head>
	<title> MMD </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<!-- 3D 库 -->
	<script src="cannon.js"></script>
	<script src="babylon.max.js"></script>
	<!-- MMD库 -->
	<script src="mmdparser.js"></script>
	<!-- MMD加载器 -->
	<script src="loaderMMD.js"></script>
	<style>
		html,
		body {
			overflow: hidden;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		#renderCanvas {
			width: 100%;
			height: 100%;
			touch-action: none;
		}
	</style>
	<script>
		var $ = {};
		// 测试代码
		window.addEventListener('DOMContentLoaded', function () {
			// 获得元素
			var canvas = document.getElementById('renderCanvas');
			// 创建渲染
			var engine = new BABYLON.Engine(canvas, true);
			// 隔离创建
			var scene = (function () {
				// 创建一个基本的Scene对象，用来容纳所有其他对象
				var scene = new BABYLON.Scene(engine);
				// 启动物理
				var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
				var physicsPlugin = new BABYLON.CannonJSPlugin();
				scene.enablePhysics(gravityVector, physicsPlugin);
				scene.collisionsEnabled = true;

				// 创建一个相机，设置其位置为
				var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 20, -10), scene);
				// 相机聚焦在场景原点位置
				camera.setTarget(BABYLON.Vector3.Zero());
				// 使得我们可以控制相机拍摄角度，和three.js中的OrbitsControl效果类似，但简单得多
				camera.attachControl(canvas, false);
				camera.position.y = 10;
				camera.position.z = -40;
				camera.rotation.x = -0.1;
				camera.rotation.y = 0;
				// 设置重力 + 启用重力
				// touchCamera.gravity = new BABYLON.Vector3(0, -0.98, 0);
				// touchCamera.applyGravity = true;
				// 启用碰撞
				camera.collisionsEnabled = true;
				// 检测碰撞 
				camera.checkCollisions = true;
				// 设置包围盒
				camera.ellipsoid = new BABYLON.Vector3(0.4, 0.8, 0.4);

				// MMD 测试
				var mmd = new MMD(scene);
				$.scene = scene;
				/*
				mmd.LoaderPmd('cute rin\\6.pmd', (mmd) => {
					$.mmd = mmd;
					MMD.prototype.Load(
						"mag.vmd",
						'arraybuffer',
						undefined,
						function (buffer) {
							var vmd = MMD.prototype.Parser.parseVmd(buffer);
							console.log("开始处理: ", vmd);
				 
							var bonesindex = {};
							var iks = [];
							var n = mmd.iks.length;
							for (i = 0; i < n; i++) {
								iks[mmd.iks[i].target] = mmd.iks[i];
							}
							n = mmd.Skeleton.bones.length;
							for (var i = 0; i < n; i++) {
								bonesindex[mmd.Skeleton.bones[i].name] = i;
							}
							var Motion = {
								Fps: 0,
								TheCurrent: 0
							};
							$.UpdateThe = () => {
								if (Motion.TheCurrent < vmd.metadata.motionCount) {
									while (true) {
										// 当前动作变换
										var motions = vmd.motions[Motion.TheCurrent];
										// 处理动作
										var id = bonesindex[motions.boneName];
										if (id) {
											var bones = mmd.Skeleton.bones[id]; // 获得骨骼
											if (motions.boneName == 'センター' || iks[id] != undefined) {
												//bones.setRotation(new BABYLON.Vector3(...motions.rotation));
												//bones.setPosition(new BABYLON.Vector3(...motions.position));
												//var b = mmd.Skeleton.bones[iks[id].effector];
												//b.rotation = new BABYLON.Vector3(...motions.rotation);
												//b.position = new BABYLON.Vector3(...motions.position).add(bones.getPosition());                                   
											 
												//for (var l = 0; l < iks[id].links.length; l++) {
												//    b = mmd.Skeleton.bones[iks[id].links[l].index];
												//    b.rotation = new BABYLON.Vector3(...motions.rotation);
												//    b.position = new BABYLON.Vector3(...motions.position).add(bones.getPosition());
												//}
											 
											} else {
												bones.setRotation(new BABYLON.Vector3(...motions.rotation), BABYLON.Space.LOCAL, $.mesh);
												bones.translate(new BABYLON.Vector3(...motions.position), BABYLON.Space.LOCAL, $.mesh);
											}
										}
										// 下一个动作变换
										Motion.Fps = vmd.motions[Motion.TheCurrent + 1].frameNum
										if (Motion.Fps == motions.frameNum) {
											Motion.TheCurrent += 1;
										} else {
											break;
										}
									}
									// 下一动作帧地址
									Motion.TheCurrent += 1;
								}
								return Motion.Fps;
							};
					  
							int = window.setInterval(
								() => {
									$.UpdateThe();
									if (n == Motion.TheCurrent) {
										window.clearInterval(int);
									}
								}, 30);
				   
						}
					);
				});
				*/
				// mmd.LoaderPmd('cute rin\\6.pmd', (mmd) => $.mmd = mmd);
				mmd.LoaderPmx('ThreeMotherFox\\Nine-tailedFoxWithEars.pmx', (mmd) => $.mmd = mmd);
				// 创建地面”形状；其构造函数的5个参数和球体一样
				var ground = BABYLON.Mesh.CreateGround('ground1', 600, 600, 2, scene);
				ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, {
					//ground should stay in place
					mass: 0
				});
				ground.receiveShadows = true;
				ground.checkCollisions = true;
				// 返回 Scene对象一个半球形光源,朝向为天空
				var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
				return scene;
			})();
			// 循环渲染
			engine.runRenderLoop(function () {
				scene.render();
			});
			//追加事件：帆布与大小调整程序
			window.addEventListener('resize', function () {
				engine.resize();
			});
		});
		
	</script>
</head>

<body>
	<canvas id="renderCanvas"></canvas>
</body>

</html>